<template>
    <router-link :class="{ active: props.webNavSelected.selected == 'index' }"
        :to="{ name: 'web_index' }">首页</router-link>
    <router-link :class="{ active: props.webNavSelected.selected == 'about' }"
        :to="{ name: 'web_about' }">关于</router-link>
    <router-link :class="{ active: props.webNavSelected.selected == 'video' }"
        :to="{ name: 'web_video' }">视频（点击加载更多）</router-link>
    <router-link :class="{ active: props.webNavSelected.selected == 'video_scroll' }"
        :to="{ name: 'web_video_scroll' }">视频（滚动加载）</router-link>
    <router-link :class="{ active: props.webNavSelected.selected == 'donation' }"
        :to="{ name: 'web_donation' }">公益项目</router-link>

</template>

<script setup>
const props = defineProps(['webNavSelected']);  // 接收父组件传参
</script>

<style scoped>
a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    padding: 0 10rem;
    margin-right: 10rem;
    font-size: 18rem;
}

a.active {
    color: #ff5a00;
    position: relative;
}

a.active:after {
    content: '';
    position: absolute;
    bottom: -4rem;
    left: 0;
    width: 100%;
    height: 4rem;
    background-color: #df1313;
}

/*手机端样式*/
@media screen and (max-width: 800px) {

    a {
        width: 100%;
        height: 36rem;
        line-height: 36rem;
        background: #F5F7FA;
        border-radius: 3rem;
        margin-bottom: 20rem;
        padding: 0 20rem;
        font-size: 12rem;
        margin-right: 0;
    }

    a.active {
        color: #FFFFFF;
        background: #0C48C9;
    }

    a.active:after {
        display: none;
    }

}
</style>